<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>注册</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
	<link href="../../lib/layui/css/layui.css" rel="stylesheet">
	<script type="text/javascript" src="../../lib/layui/layui.js" charset="utf-8"></script>
	<link href="../../static/css/login.css" rel="stylesheet">
</head>

<body>
	<div class="login-container">
		<div class="login-left">
			<div class="pic">
				<img src="../../static/images/login-logo.png">
				<img src="../../static/images/login-pic.png">
			</div>
		</div>
		<div class="login-right">
			<div class="history">
				<a href="javascript:history.go(-1)"><i class="iconfont use-go-back"></i></a>
			</div> 
			<div class="title">User <span>REGISTER</span></div>
			<!--Form-->
			<form class="layui-form">
				<div class="demo-login-container">
					<div class="layui-form-item">
						<div class="text">手机号码</div>
						<div class="layui-input-wrap">
							<input type="tel" name="phone" placeholder="请输入手机号码" lay-verify="required|phone" autocomplete="off" lay-reqtext="请填写手机号码" lay-affix="clear" class="layui-input demo-phone">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="text">验证码</div>
						<div class="layui-input-wrap">
							<input type="tel" name="vercode" placeholder="请输入验证码" lay-verify="required" autocomplete="off" lay-reqtext="请输入验证码" class="layui-input">
							<button type="button" class="now" lay-on="get-vercode">获取验证码</button>
						</div>
					</div>
					<div class="select-account">
						<div class="prompt">
							<span>选择账号类型</span>
						</div>
						<div class="user-select">
							<span class="now" data-id=""><i class="iconfont use-individual"></i>个人注册</span>
							<span data-id="2"><i class="iconfont use-enterprise"></i>企业注册</span>
						</div>
						<div class="add-name"></div>
					</div>
					<div class="layui-form-item no">
						<input type="checkbox" name="agreement" lay-verify="required" lay-skin="primary" title="请仔细阅读并同意">
						<a href="./agreement.html" target="_blank" class="agreement" style="position: relative; top: 6px; left: -15px;">
							<ins>《用户协议》</ins>
						</a>
					</div>
					<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-reg">注册</button>
				</div>
				<div class="go-register">
					已有账户，<a href="./login.html">立即登录</a>
				</div>
			</form>
			<div class="rights">Copyright © www.AxureUX.com, All Rights Reserved.</div>
		</div>
	</div>
</body>

</html>

<script>

	layui.use(['jquery', 'layer'], function () {
		var $ = layui.$
		var form = layui.form
		var layer = layui.layer
		var util = layui.util
		
		// 提交事件
		form.on('submit(demo-reg)', function (data) {
			var field = data.field; // 获取表单字段值
			// 是否勾选同意
			if (!field.agreement) {
				layer.msg('您必须勾选同意用户协议才能注册');
				return false;
			}
			// 显示填写结果，仅作演示用
			layer.alert(JSON.stringify(field), {
				title: '当前填写的字段值'
			});
			// 此处可执行 Ajax 等操作
			// …
			return false; // 阻止默认 form 跳转
		});

		// 企业注册
		$('.user-select span').on('click', function() {
			let id = $(this).data("id")
			console.log(id)
			$(this).addClass('now').siblings().removeClass('now');
			if (id) {
				$('.add-name').html(`
					<input type="text" name="name" placeholder="请输入企业名称" lay-reqtext="请输入企业名称" lay-verify="required" autocomplete="off" class="layui-input">`)
			} else {
				$('.add-name').html('')
			}
		})

		 // 普通事件
		util.on('lay-on', {
			// 获取验证码
			"get-vercode": function (obj) {
				var isvalid = form.validate('.demo-phone'); // 主动触发验证，v2.7.0 新增 
				// 验证通过
				if (isvalid) {
					// layer.msg('手机号规则验证通过')
					// 此处可继续书写「发送验证码」等后续逻辑
					countDown(obj)
				}
			}
		})

		// 倒计时
		function countDown(obj) {
			var time = 60
			//消抖，防止用户多次点击发送短信按钮造成读秒过快情况
			obj.attr("disabled", "true");
			let interval = setInterval(() => {
				if (time == 0) {
					clearInterval(interval)
					obj.text("获取验证码");
					obj.removeAttr("disabled")
				} else {
					obj.text(`重新发新${time--}秒`)
				}
			}, 1000)
		}

	})
</script>